<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" href="css/surveyview.css"/>
     <title>信息安全问卷调查</title>
</head>
<body>
	<div id="app">
		<div class="survey_page" v-if="showGeneralPage">
			<div id="survey_title" class="survey_title">
				<div class="survey_top">
					<div class="survey_userName"><span>用户名：</span><span id="current_user_name">{{userName}}</span></div>
					<div class="survey_duration"><span>本次登录时长：</span><span>{{duration}}</span></div>
					<div class="survey_reLogin"><button class="s-btn" v-on:click="logout()">注销</button></div>
				</div>
				<div class="survey_show_title">供应商信息安全问卷调查</div>
				<p class="survey_show_tips">
					&nbsp;&nbsp;&nbsp;&nbsp;为确保我司与贵公司的战略合作关系，保证我司提供敏感信息的安全，诚挚邀请贵公司就以下问卷做如实回答，本问卷调查结果会作为供应商入选的必要条件，请确保所填信息真实有效，预祝合作愉快！
				</p>
				<div class="survey_client_info">
					<div class="client_info client_info_left"><div
							class="client_info_label">供应商全称：</div><input class="client_input" name="supplierName" v-model.trim="supplierName"></div>
					<div class="client_info"><div
							class="client_info_label">合作项目名称：</div><input class="client_input" name="projectName" v-model.trim="projectName"></div>
					<div class="client_info client_info_left"><div
							class="client_info_label">联系人姓名：</div><input class="client_input" name="relationerName" v-model.trim="relationerName"></div>
					<div class="client_info"><div
							class="client_info_label">联系人邮箱：</div><input class="client_input" name="relationerEmail" v-model.trim="relationerEmail"></div>
					<div class="client_info client_info_left"><div
							class="client_info_label">采购专员姓名：</div><input class="client_input" name="buyerName" v-model.trim="buyerName"></div>
					<div class="client_info"><div
							class="client_info_label">采购专员邮箱：</div><input class="client_input" name="buyerEmail" v-model.trim="buyerEmail"></div>
				</div>
			</div>
			<div id="survey_content" class="survey_content">
				<!--'survey_content_item'-->
				<div  class="survey_content_item"  :class="li.hiddenClass" v-for="li in surveyList" ref="surveyItem">
					<button type="button" class="serialNumber dis-none">{{li.serialNumber}}</button>
					<div class="survey_content_bar" v-on:click="switchBar($event)">{{li.classes}}</div>
					<!--<div class="survey_content_bar">{{li.classes}}</div>-->
					<div class="survey_content_title">{{li.serialNumber}}、 {{li.questionName}}
						<div class="survey_content_title_file">
							<label class="s-btn"><span class="survey_must" v-if="li.dataRequired == 1" ref="mustFiles">*</span>上传证明文件<input
									accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,image/gif,image/jpeg,image/jpg,image/png"
									type="file"
									name="files"
									multiple
									ref="filesList"
									@change="changeFiles($event)"></label>
							<span class="file_name">单个文件小于1M</span>
						</div>
					</div>
					<div class="survey_content_chose">
						<ul>
							<li><label @mousedown="radioClick($event)" ref="radioClick"><input class="survey_chose_item"
											  type="radio"
											  data-checked="3"/><span>满足</span><input class="survey_chose_feedback" placeholder="填写理由"/></label></li>
							<li><label @mousedown="radioClick($event)" ref="radioClick"><input class="survey_chose_item"
											  type="radio"
											  data-checked="2"/><span>大部分满足</span><input class="survey_chose_feedback" placeholder="填写理由"/></label></li>
							<li><label @mousedown="radioClick($event)" ref="radioClick"><input class="survey_chose_item"
											  type="radio"
											  data-checked="1"/><span>小部分满足</span><input class="survey_chose_feedback" placeholder="填写理由"/></label></li>
							<li><label @mousedown="radioClick($event)" ref="radioClick"><input class="survey_chose_item"
											  type="radio"
											  data-checked="0"/><span>不满足</span><input class="survey_chose_feedback" placeholder="填写理由"/></label></li>
						</ul>
					</div>
				</div>
			</div>
			<div id="survey_submit" class="survey_submit">
				<button class="survey_save s-btn" v-on:click="surveySave()">保存</button>
				<button class="survey_submit s-btn" v-on:click="surveySubmit()">提交</button>
			</div>
			<div class="returnTop">
				<button class="s-btn" v-on:click="returnTop()">返回顶部</button>
			</div>
		</div>
		<div class="survey_page" id="manager-page" v-else-if="showManagerPage">
			<div class="survey_top">
				<div class="survey_userName"><span>用户名：</span><span id="current_manage_name">{{userName}}</span></div>
				<div class="survey_duration"><span>本次登录时长：</span><span>{{duration}}</span></div>
				<div class="survey_reLogin"><button class="s-btn" v-on:click="openLogin(userName,password)">重新登录</button></div>
			</div>
			<div class="survey_table" v-if="showTable">
				<table>
					<thead>
					<tr>
						<th>序号</th>
						<th>答题人</th>
						<th>答题时长</th>
						<th>得分</th>
						<th>是否及格</th>
						<th>查看答题详情</th>
					</tr>
					</thead>
					<tbody v-if="showTbody">
					<tr v-for="li in listData">
						<td><span>{{li.index}}</span></td>
						<td><span>{{li.userName}}</span></td>
						<td><span>{{li.duration}}分钟</span></td>
						<td><span>{{li.score}}</span></td>
						<td><span>{{li.statusDetail}}</span></td>
						<td><span><a href="#"
									 v-on:click="showDetailPage(li.scoreId,li.userName)">答题详情</a></span></td>
					</tr>
					</tbody>
					<tfoot v-else>
					<tr>
						<td colspan="6"><span>暂无人员答题</span></td>
					</tr>
					</tfoot>
				</table>
				<div class="h-showPage" id="pagination">
					<!--分页下 选页数和 第几页模板-->
					<div class="h-totalPage">
						<span>共 <b>{{total}}</b> 条</span>
						<span>每页显示行</span>
						<div class="h-eachShow">
							<p>{{pageSize}}</p>
							<ul>
								<li v-for="li in perNum" v-bind:data-num="li" v-on:click="pageSizeClick(li)">{{li}}</li>
							</ul>
							<i></i>
						</div>
					</div>
					<div class="h-pageNum">
						<i class="h-goLeft" data-page="prev" title="上一页" v-on:click="pagePreClick()"></i>
						<ul>
							<li v-for="li in pageSeries" v-bind:data-page="li" v-on:click="pageNumClick(li)" ref="page">{{li}}</li>
						</ul>
						<i class="h-goRight" data-page="next" title="下一页" v-on:click="pageNextClick()"></i>
					</div>
				</div>
			</div>
			<div v-else-if="showDetail">
				<div class="survey_title">
					<div class="survey_show_title">供应商信息安全问卷调查——{{answerName}}答题详情</div>
					<p class="survey_show_tips">
						&nbsp;&nbsp;&nbsp;&nbsp;为确保我司与贵公司的战略合作关系，保证我司提供敏感信息的安全，诚挚邀请贵公司就以下问卷做如实回答，本问卷调查结果会作为供应商入选的必要条件，请确保所填信息真实有效，预祝合作愉快！
					</p>
					<div class="survey_client_info">
						<div class="client_info client_info_left"><div
								class="client_info_label">供应商全称：</div><input class="client_input" name="supplierName" v-model.trim="supplierName"></div>
						<div class="client_info"><div
								class="client_info_label">合作项目名称：</div><input class="client_input" name="projectName" v-model.trim="projectName"></div>
						<div class="client_info client_info_left"><div
								class="client_info_label">联系人姓名：</div><input class="client_input" name="relationerName" v-model.trim="relationerName"></div>
						<div class="client_info"><div
								class="client_info_label">联系人邮箱：</div><input class="client_input" name="relationerEmail" v-model.trim="relationerEmail"></div>
						<div class="client_info client_info_left"><div
								class="client_info_label">采购专员姓名：</div><input class="client_input" name="buyerName" v-model.trim="buyerName"></div>
						<div class="client_info"><div
								class="client_info_label">采购专员邮箱：</div><input class="client_input" name="buyerEmail" v-model.trim="buyerEmail"></div>
					</div>
				</div>
				<div class="survey_content">
					<div class="survey_content_item" :class="li.hiddenClass" v-for="li in detailList" ref="answerItem" data-id="">
						<button type="button" class="serialNumber dis-none">{{li.serialNumber}}</button>
						<div class="survey_content_bar" v-on:click="switchBar($event)">{{li.classes}}</div>
						<!--<div class="survey_content_bar">{{li.classes}}</div>-->
						<div class="survey_content_title">{{li.serialNumber}}、 {{li.questionName}}
							<div class="survey_content_title_file dis-none">
								<label class="s-btn">下载浏览证明文件<a></a></label>
							</div>
						</div>
						<div class="survey_content_chose">
							<ul>
								<li><label @mousedown="radioClick($event)" ref="radioClick"><input
										class="survey_chose_item" type="radio" data-checked="3"/><span>满足</span><input
										class="survey_chose_feedback" placeholder="填写理由"/></label></li>
								<li><label @mousedown="radioClick($event)" ref="radioClick"><input
										class="survey_chose_item" type="radio" data-checked="2"/><span>大部分满足</span><input
										class="survey_chose_feedback" placeholder="填写理由"/></label></li>
								<li><label @mousedown="radioClick($event)" ref="radioClick"><input
										class="survey_chose_item" type="radio" data-checked="1"/><span>小部分满足</span><input
										class="survey_chose_feedback" placeholder="填写理由"/></label></li>
								<li><label @mousedown="radioClick($event)" ref="radioClick"><input
										class="survey_chose_item" type="radio" data-checked="0"/><span>不满足</span><input
										class="survey_chose_feedback" placeholder="填写理由"/></label></li>
							</ul>
						</div>
					</div>
				</div>
				<div id="manager_submit" class="survey_submit">
					<button class="survey_submit s-btn" v-on:click="managerSubmit()">提交</button>
				</div>
				<div class="returnList">
					<button class="s-btn" v-on:click="showList()">返回列表</button>
				</div>
				<div class="returnTop">
					<button class="s-btn" v-on:click="returnTop()">返回顶部</button>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery/jquery-1.10.1.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript" src="js/survey/pagination.js"></script>
	<script type="text/javascript" src="js/survey/index.js"></script>
</body>
</html>